<script setup lang="ts">
import {reactive, ref} from 'vue';
import {save} from '@/api/employee'
import {ElMessage} from "element-plus";

const id = ref(0)
const actionType = ref('add')
const ruleForm = reactive({
    name: '李四',
    password: '123456',
    pwd2: '123456',
    phone: '13014577033',
    sex: '男',
    idNumber: '012345678912345678',
    username: 'admin',
    status: 1,
    createUser: localStorage.getItem("id")
})

const checkPwd = (rules, value, callback) => {
    if (value.trim().length == 0) {
        callback(new Error("请输入确认密码"));
    } else if (value != ruleForm.password) {
        callback(new Error("两次密码不一致"));
    } else {
        callback();
    }
}

const rules = reactive({
    //账号
    username: [
        {required: true, 'message': '账号必须填写', trigger: 'blur'},
    ],
    //密码
    password: [
        {required: true, 'message': '密码必须填写', trigger: 'blur'},
    ],
    //确认密码
    pwd2: [
        {required: true, 'message': '确认密码必须填写', trigger: 'blur'},
        {validator: checkPwd, required: true, trigger: "blur",}
    ],
    //验证手机号
    phone: [
        {required: true, 'message': '手机号必须填写', trigger: 'blur'},
    ]
})
const submitForm = async () => {
    let {code, msg, data} = await save(ruleForm)
    if (code == 1) {
        ElMessage.success(data)
    } else if (code == 0) {
        ElMessage.error(msg)
    }
}
</script>

<template>
    <el-form
            :model="ruleForm"
            :rules="rules"
            :inline="false"
            label-width="180px"
            class="demo-ruleForm"
    >
        <el-form-item label="账号:" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号" maxlength="20"/>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
            <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" maxlength="20"/>
        </el-form-item>
        <el-form-item label="确认密码:" prop="pwd2">
            <el-input v-model="ruleForm.pwd2" type="password" placeholder="确认密码" maxlength="20"/>
        </el-form-item>
        <el-form-item
                label="员工姓名:"
                prop="name"
        >
            <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入员工姓名"
                    maxlength="20"
            />
        </el-form-item>

        <el-form-item
                label="手机号:"
                prop="phone"
        >
            <el-input
                    v-model="ruleForm.phone"
                    placeholder="请输入手机号"
                    maxlength="20"
            />
        </el-form-item>
        <el-form-item
                label="性别:"
                prop="sex"
        >
            <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item
                label="身份证号:"
                prop="idNumber"
        >
            <el-input
                    v-model="ruleForm.idNumber"
                    placeholder="请输入身份证号"
                    maxlength="20"
            />
        </el-form-item>
        <el-form-item
                label="账号状态:"
                prop="status"
        >
            <el-switch
                    v-model="ruleForm.status"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    active-value="1"
                    active-text="启用"
                    inactive-value="0"
                    inactive-text="禁用"
            />
        </el-form-item>

        <div class="subBox address">
            <el-form-item>
                <el-button @click="goBack()"> 取消</el-button>
                <el-button type="primary" @click="submitForm"> 保存</el-button>
                <el-button
                        v-if="actionType == 'add'"
                        type="success"
                        class="continue"
                        @click="submitForm('ruleForm', true)"
                > 保存并继续添加
                </el-button>
            </el-form-item>
        </div>
    </el-form>
</template>

<style scoped>

</style>
